<template>
  <div class="contanter">
    <el-collapse v-model="activeNames">
            <el-collapse-item name="1" >
                <template  class="collapse-titile" #title="{ isActive }" >
                    <el-icon style="font-size: 20px"><MessageBox /></el-icon>
                    <!-- <i class="iconfont icon-ditu_shebeitubiao" style="color: #6e7174; margin-right: 8px; font-size: 20px"></i> -->
                    <div style="margin-right: 8px; color: #d4d5d8; font-weight: 500">|</div>
                    <!-- 设备状态 -->
                    <div class="statusDisp" style="background: linear-gradient(180deg, #ffffff 0%, #00de33 48%, #00c65b 100%)" v-if="devitem.offline_flag === 0"></div>
                    <div class="statusDisp" style="background: linear-gradient(180deg, #f8fbff 0%, #cdd3dd 41%, #929ba8 100%)" v-if="devitem.offline_flag === 1"></div>
                    <div class="statusDisp" style="background: linear-gradient(180deg, #ffffff 0%, #fefd00 50%, #fefd00 100%)" v-if="devitem.offline_flag === 2"></div>
                    <div class="statusDisp" style="background: linear-gradient(180deg, #ffffff 0%, #ff0000 42%, #ff0000 100%)" v-if="devitem.offline_flag === 3"></div>
                    <div class="titlecls">{{ devitem.devicename }}</div>
                    <div class="titlecls" style="margin-left: 20px;">更新:{{ devitem.timesTamp }}</div>
                    <el-button @click="handleDownload(devitem.address)" style="margin-left: 20px;" type="primary">下载记录</el-button >
                    <el-button @click="handleDelel(devitem.address)" style="margin-left: 20px;" type="danger">删除记录</el-button >
                </template >
                <!-- 通道列表的统计 -->
                <div class="groupcls">
                    <div v-for="(item, index) in devitem.channels" :ref="index" :key="index" class="flex itemcls">
                        <!-- <div style="display: flex;align-items: center;margin-left: 5px" > -->
                        <div class="statusDisp" style="background: linear-gradient(180deg, #ffffff 0%, #00de33 48%, #00c65b 100%)" v-if="item.status === 0"></div>
                        <!-- 离线 -->
                        <div class="statusDisp" style="background: linear-gradient(180deg, #f8fbff 0%, #cdd3dd 41%, #929ba8 100%)" v-if="item.status === 1"></div>
                        <!-- 超警戒值 -->
                        <div class="statusDisp" style="background: linear-gradient(180deg, #ffffff 0%, #fefd00 50%, #fefd00 100%)" v-if="item.status === 2"></div>
                        <!-- 超行动值 -->
                        <div class="statusDisp" style="background: linear-gradient(180deg, #ffffff 0%, #ff0000 42%, #ff0000 100%)" v-if="item.status === 3"></div>
                        <div style="margin: 0 10px; color: #d4d5d8; font-weight: 500">|</div>
                        <span class="span1" :title="item.name">{{ item.name }}</span
                        ><!--over_ellipsis_10 -->
                        <span class="span1">({{ item.value }}{{ item.unit }})</span>
                        <!-- </div> -->
                        <!-- <div  class="flex f-end"> -->
                        <!-- <img v-if="item.isSelected" width="14px" height="14px" alt="" :src="gouUrl" /> -->
                        <!-- </div> -->
                    </div>
                </div>
            </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import imgLoader from "@/assets/images/nodata.png";
import moment from 'moment';

let { proxy } = getCurrentInstance();
const props = defineProps({
  devitem: {
    type: Object,
    default: () => {},
  },
});
const inTimeInfo = ref([

]);
const activeNames = ref(['1'])


const handleFileDownload=(blob,response) =>{
  // 1. 从响应头获取文件名（仅处理ASCII文件名）
  let fileName = 'default.pdf';
  const contentDisposition = response.headers.get('Content-Disposition');
  
  if (contentDisposition) {
    const match = contentDisposition.match(/filename=([^;\n]+)/);
    if (match) fileName = match[1].replace(/['"]/g, '');
  }

  // 2. 创建下载链接
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(new Blob([blob]));
  link.download = fileName;
  
  document.body.appendChild(link);
  link.click();
  
  // 3. 清理资源
  document.body.removeChild(link);
  window.URL.revokeObjectURL(link.href);
};

const handleDownload = (row) => {
  console.log("下载",row);
   proxy
    ._http({
        url: "/api/History/devDownload",
        type: "post",
        isBlob: true,
        isLoading: true,
        data: {
        DeviceId:row
        },
    })
    .then((res) => {
        handleFileDownload(res.data,res);
        
    })
    .catch((err) => {
    }); 
}
const handleDelel = (row) => {
  console.log("删除",row);
   ElMessageBox.confirm(
        "删除后系统无法恢复，确认删除吗?",
        "信息提示",
        {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        customClass: "public-message-box-default",
        }
    ).then(() => {
    proxy
        ._http({
            url: "/api/History/delete",
            type: "post",
            isBody: true,
            isLoading: true,
            data: {
                DeviceId:row
            },
        })
        .then((res) => {
            ElMessage.success("删除成功");
        })
        .catch((err) => {});  
    });
}

onMounted(() => {
  //getData();
  console.log("单个设备",props.devitem);
  props.devitem.timesTamp = moment(props.devitem.timesTamp*1000).format("YYYY-MM-DD HH:mm:ss")
});
</script>
<style lang="scss">
.collapse-titile {
    display: flex;
    flex: 1 0 90%;
    order: 1;
    align-items: center;
}
.el-collapse-item__header {
    flex: 1 0 auto;
    order: -1;
}

.contanter {
    width: 100%;
    padding: 8px;

    .titlecls {
        font-size: 16px;
        font-weight: 700;
    }

    .numbercls {
        font-size: 16px;
        color: #8b97a7;
        text-align: center;
    }

    .groupcls {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .itemcls {
        width: 350px;
        height: 34px;
        // border: 1px solid #d4d7e2;
        // border-radius: 2px;
        align-items: center;
        text-align: left;
        margin-left: 24px;
        margin-bottom: 15px;

        .span1 {
            font-size: 16px;
            font-weight: 400;
            color: #6e7174;
        }
        .span2 {
            font-size: 14px;
            margin-top: 0;
        }
    }
    .itemcls:hover {
        cursor: pointer;
    }

    .statusDisp {
        width: 12px;
        height: 12px;
        border: 1px solid #151617;
        border-radius: 50%;
        margin-right: 3px;
    }
    .item {
        margin-top: 10px;
        // margin-right: 40px;
    }
}
</style>
